<template slot-scope="scope">
  <div class="device-list">
    <div class="device-list-tab">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          background: '#ffffff',
          textAlign: 'center',
          color: '#101010',
          padding: '3px',
          fontSize: '15px',
          fontWeight: '900',
        }"
        :row-style="{ height: '35px' }"
      >
        <el-table-column label="时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.date }}
          </template>
        </el-table-column>
        <el-table-column label="订单编号" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.singleId }}
          </template>
        </el-table-column>
        <el-table-column label="消费(元)" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.consumption }}
          </template>
        </el-table-column>
        <el-table-column label="侦迹币" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.TheCoin }}
          </template>
        </el-table-column>
        <el-table-column label="消费类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column label="支付方式" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.paymentWay }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // deviceList: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   },
    // },
    listarr:{}
  },
  components: {},
  data() {
    return {
      tableKey: "",
      expands: [], // 表格选中
      tableData: [
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
        {
          date: "2016年05月02日10:20",
          singleId: "213456789142354",
          consumption: "-100",
          TheCoin: "+100",
          type: "充值侦迹币",
          paymentWay: "支付宝",
        },
      ],
      rowid: "",
    };
  },
  computed: {},
  created() { console.log(this.listarr)},
  methods: {
    //表格颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else if (rowIndex % 2 == 1) {
        return "success-row";
      }
      return "success-row";
    },
  },
};
</script>

<style scoped lang="less">
/deep/th {
  border-bottom: 1px solid gray !important;
  max-height: 35px !important;
}
/deep/ td {
  border-bottom: 1px solid gray !important;
  max-height: 35px !important;
}
.device-list-tab {
  border: 1px solid gray;
}
/deep/.el-table__empty-block,
/deep/.el-table tr,
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  // background-color: #135b7a;
  height: 46px;
  color: #101010;
  font-weight: 600;
}
/deep/.el-table .warning-row td {
  background: #e9f3ff !important;
  height: 35px;
  // color: #fff;
  font-weight: 600;
}

::v-deep .el-table .warning-row td {
  background: #e9f3ff !important;
}
</style>
